Plage de surbrillance personnalisée CSS : Style avancé de sélection de texte

La sélection de texte est une interaction fondamentale sur le Web. Lorsqu’un utilisateur sélectionne du texte sur une page Web, le navigateur applique un style de surbrillance par défaut, généralement un arrière-plan bleu avec du texte blanc. Bien que fonctionnel, ce style par défaut peut souvent s’opposer à l’esthétique de conception d’un site Web. La plage de surbrillance personnalisée CSS offre un moyen puissant de remplacer ces styles par défaut et de créer une expérience utilisateur plus cohérente visuellement et plus attrayante.

Comprendre les bases de la sélection de texte

Avant de plonger dans les plages de surbrillance personnalisées, il est important de comprendre comment fonctionne la sélection de texte dans les navigateurs. Lorsqu’un utilisateur fait glisser sa souris (ou utilise d’autres méthodes de saisie) pour sélectionner du texte, le navigateur identifie la plage de texte qui a été sélectionnée et applique le style de surbrillance par défaut. Ceci est géré par le moteur de rendu interne du navigateur et n’est, par défaut, pas directement contrôlable avec CSS.

Le style de sélection par défaut

Le style de sélection de texte par défaut est régi par la feuille de style de l’agent utilisateur du navigateur. Cette feuille de style fournit le style de base pour tous les éléments HTML et comprend le style de surbrillance par défaut. Les couleurs et les styles spécifiques utilisés peuvent varier légèrement d’un navigateur et d’un système d’exploitation à l’autre.

Présentation du pseudo-élément ::selection

CSS fournit le pseudo-élément ::selection pour cibler le texte sélectionné. Cela vous permet de modifier les propriétés background-color et color du texte sélectionné. Cependant, cette approche a des limites. Elle vous permet uniquement de modifier l’arrière-plan et la couleur du texte et n’offre pas un contrôle plus précis sur la plage de surbrillance.

            
::selection {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

Ce simple extrait CSS changera la couleur d’arrière-plan du texte sélectionné en jaune et la couleur du texte en noir. Bien qu’utile, ce n’est que la pointe de l’iceberg.

API de plage de surbrillance personnalisée CSS

L’API de plage de surbrillance personnalisée CSS fournit un moyen plus avancé et plus flexible de styliser les sélections de texte. Cette API vous permet de définir des plages de surbrillance spécifiques et d’appliquer des styles personnalisés à celles-ci. Ceci est particulièrement utile pour créer des interfaces plus attrayantes visuellement et conviviales.

Concepts clés

• API de surbrillance : La technologie sous-jacente qui permet le style personnalisé.
• Régions de surbrillance : Les plages spécifiques de texte qui sont ciblées pour le style personnalisé.
• Styles personnalisés : Les propriétés CSS (au-delà de la couleur et de la couleur d’arrière-plan) qui sont appliquées aux régions de surbrillance.

Avantages de l’utilisation de la plage de surbrillance personnalisée CSS

• Personnalisation améliorée : Appliquez une gamme plus large de propriétés CSS, y compris les dégradés, les bordures, les ombres, etc.
• Expérience utilisateur améliorée : Créez des styles de sélection de texte plus attrayants visuellement et cohérents qui s’alignent sur la conception de votre site Web.
• Accessibilité : Assurez-vous que vos styles de surbrillance personnalisés sont accessibles aux utilisateurs malvoyants en fournissant un contraste suffisant et des repères visuels clairs.
• Contrôle précis : Ciblez des plages de texte spécifiques pour un style personnalisé, ce qui permet une surbrillance plus précise et contextuelle.

Implémentation de la plage de surbrillance personnalisée CSS

L’implémentation de la plage de surbrillance personnalisée CSS implique l’utilisation de JavaScript pour identifier les plages de texte que vous souhaitez styliser, puis l’application des propriétés CSS souhaitées à ces plages.

Étape 1 : Sélection de la plage de texte

La première étape consiste à identifier la plage de texte que vous souhaitez styliser. Cela peut être fait en utilisant diverses techniques JavaScript, telles que :

• document.getSelection() : Cette méthode renvoie un objet Selection représentant la plage de texte sélectionnée par l’utilisateur.
• API Range : Cette API vous permet de créer et de manipuler des plages de texte par programme.

Exemple d’utilisation de document.getSelection() :

            
const selection = document.getSelection();
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  // Now you have the range object to work with
}

            

              
                Copy
              
            
          

Exemple d’utilisation de l’API Range :

            
const range = document.createRange();
const element = document.getElementById('myElement');
range.selectNodeContents(element);
// Now you have a range that selects all content inside element

            

              
                Copy
              
            
          

Étape 2 : Création d’un objet de surbrillance

Une fois que vous avez un objet Range, vous devez créer un objet de surbrillance. Cet objet représentera la surbrillance personnalisée et sera utilisé pour appliquer les styles souhaités.

            
const highlight = new Highlight(range);

            

              
                Copy
              
            
          

Étape 3 : Enregistrement de la surbrillance

Pour rendre la surbrillance visible, vous devez l’enregistrer auprès de l’objet CSS.highlights. Il s’agit d’un objet global qui gère toutes les surbrillances personnalisées sur la page.

            
if (!window.CSS.highlights) {
  console.error('CSS Custom Highlight API is not supported in this browser.');
} else {
  CSS.highlights.set('my-custom-highlight', highlight);
}

            

              
                Copy
              
            
          

Ici, 'my-custom-highlight' est un nom arbitraire que vous choisissez pour identifier votre surbrillance.

Étape 4 : Application de styles personnalisés avec CSS

Enfin, vous pouvez appliquer des styles personnalisés à la surbrillance à l’aide du pseudo-élément ::highlight() dans votre CSS.

            
::highlight(my-custom-highlight) {
  background-color: rgba(255, 200, 0, 0.5);
  color: #333;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

Cet extrait CSS appliquera un arrière-plan jaune semi-transparent, un texte gris foncé, une épaisseur de police grasse et une ombre de texte subtile au texte dans la plage 'my-custom-highlight'.

Exemple complet

Voici un exemple complet qui montre comment utiliser la plage de surbrillance personnalisée CSS :

HTML :

            
This is some text that can be selected.  We will customize the highlight styling using CSS Custom Highlight Range.

            

              
                Copy
              
            
          

JavaScript :

            
const textElement = document.getElementById('myText');

textElement.addEventListener('mouseup', () => {
  const selection = document.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const highlight = new Highlight(range);

    if (!window.CSS.highlights) {
      console.error('CSS Custom Highlight API is not supported in this browser.');
    } else {
      CSS.highlights.set('custom-selection', highlight);
    }
  }
});

            

              
                Copy
              
            
          

CSS :

            
::highlight(custom-selection) {
  background-color: lightgreen;
  color: darkgreen;
  font-style: italic;
}

            

              
                Copy
              
            
          

Dans cet exemple, lorsque l’utilisateur relâche le bouton de la souris après avoir sélectionné du texte dans le paragraphe, le code JavaScript crée une surbrillance et l’enregistre. Le CSS applique ensuite un arrière-plan vert clair, une couleur de texte vert foncé et un style de police italique au texte sélectionné.

Techniques de personnalisation avancées

La plage de surbrillance personnalisée CSS permet des techniques de personnalisation encore plus avancées, notamment :

Utilisation de dégradés

Vous pouvez utiliser des dégradés CSS pour créer des effets de surbrillance visuellement époustouflants.

            
::highlight(gradient-highlight) {
  background-image: linear-gradient(to right, #f00, #ff0);
  color: white;
  font-weight: bold;
}

            

              
                Copy
              
            
          

Ajout de bordures et d’ombres

Vous pouvez ajouter des bordures et des ombres à la surbrillance pour la faire ressortir encore plus.

            
::highlight(border-highlight) {
  background-color: rgba(0, 0, 255, 0.2);
  border: 2px solid blue;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  color: black;
}

            

              
                Copy
              
            
          

Surbrillance conditionnelle

Vous pouvez utiliser JavaScript pour modifier dynamiquement les styles de surbrillance en fonction de certaines conditions. Par exemple, vous pouvez mettre en évidence différents types de texte avec différentes couleurs.

            
// Example: Highlight keywords in a different color
const keywords = ['keyword1', 'keyword2', 'keyword3'];

// (Implementation for finding keywords and creating ranges would go here)

// Then, in CSS:
::highlight(keyword-highlight) {
  background-color: yellow;
  color: red;
}

            

              
                Copy
              
            
          

Considérations relatives à l’accessibilité

Lors de l’implémentation de styles de surbrillance personnalisés, il est essentiel de tenir compte de l’accessibilité. Assurez-vous que vos styles de surbrillance offrent un contraste suffisant et des repères visuels clairs pour les utilisateurs malvoyants.

Rapport de contraste

Assurez-vous que le rapport de contraste entre la couleur d’arrière-plan et la couleur du texte de vos styles de surbrillance respecte les exigences des WCAG (Web Content Accessibility Guidelines). Un rapport de contraste d’au moins 4,5:1 est recommandé pour le texte normal et de 3:1 pour le texte volumineux.

Repères visuels

Fournissez des repères visuels clairs pour indiquer que du texte a été sélectionné. Cela peut être fait en utilisant des couleurs, des bordures ou des ombres distinctes.

Tests avec des technologies d’assistance

Testez vos styles de surbrillance personnalisés avec des technologies d’assistance, telles que les lecteurs d’écran, pour vous assurer qu’ils sont accessibles à tous les utilisateurs.

Compatibilité du navigateur

L’API de plage de surbrillance personnalisée CSS est une technologie relativement nouvelle, et la prise en charge du navigateur peut varier. Fin 2023, elle est prise en charge dans les navigateurs basés sur Chromium (Chrome, Edge, Brave) et Safari (Technology Preview). Firefox a exprimé son intérêt, mais la prise en charge n’est pas encore implémentée.

Il est important de vérifier les dernières informations de compatibilité du navigateur avant d’utiliser cette API en production. Vous pouvez utiliser des sites Web comme "Can I use..." pour suivre la prise en charge du navigateur pour la plage de surbrillance personnalisée CSS.

Pour les navigateurs qui ne prennent pas en charge l’API, vous pouvez utiliser le pseudo-élément ::selection comme solution de repli.

Cas d’utilisation et exemples

Voici quelques cas d’utilisation pratiques et des exemples de la façon dont la plage de surbrillance personnalisée CSS peut être utilisée :

Éditeurs de code

Personnalisez les styles de surbrillance pour le code sélectionné dans un éditeur de code afin d’améliorer la lisibilité et l’attrait visuel. Différents langages de programmation pourraient même avoir différents schémas de surbrillance.

Visionneuses de documents

Améliorez l’expérience utilisateur des visionneuses de documents en fournissant des styles de surbrillance personnalisés qui correspondent à la conception du document.

Plateformes d’apprentissage en ligne

Créez des expériences d’apprentissage interactives en mettant en évidence les concepts clés ou les informations importantes dans un style personnalisé.

Surbrillance des résultats de recherche

Améliorez la visibilité des résultats de recherche en mettant en évidence les termes correspondants avec un style personnalisé distinct. Réfléchissez à ce à quoi cela pourrait ressembler dans une recherche multilingue, où les couleurs de surbrillance pourraient subtilement indiquer la langue du terme correspondant.

Outils d’annotation

Permettez aux utilisateurs d’annoter du texte avec des styles de surbrillance personnalisés pour marquer les passages importants ou ajouter des notes. Différents utilisateurs pourraient se voir attribuer différentes couleurs de surbrillance pour l’annotation collaborative.

Meilleures pratiques

• Utiliser HTML sémantique : Utilisez des éléments HTML sémantiques pour structurer votre contenu. Cela facilitera l’identification des plages de texte que vous souhaitez styliser.
• Rester simple : Évitez d’utiliser des styles de surbrillance trop complexes ou distrayants. L’objectif est d’améliorer l’expérience utilisateur, pas de submerger l’utilisateur.
• Tester minutieusement : Testez vos styles de surbrillance personnalisés sur différents navigateurs et appareils pour vous assurer qu’ils fonctionnent comme prévu.
• Tenir compte des performances : Évitez de créer trop de plages de surbrillance, car cela peut avoir un impact sur les performances. Optimisez votre code JavaScript pour identifier et styliser efficacement les plages de texte.

Conclusion

La plage de surbrillance personnalisée CSS offre un moyen puissant et flexible de styliser les sélections de texte sur le Web. En utilisant cette API, vous pouvez créer des interfaces plus attrayantes visuellement et conviviales qui améliorent l’expérience utilisateur et s’alignent sur la conception de votre site Web. Bien que la prise en charge du navigateur soit encore en évolution, les avantages potentiels de cette technologie en font un outil précieux pour les développeurs et les concepteurs Web. N’oubliez pas de prioriser l’accessibilité et les performances lors de l’implémentation de styles de surbrillance personnalisés. Au fur et à mesure que le Web continue d’évoluer, des fonctionnalités comme la plage de surbrillance personnalisée CSS joueront un rôle de plus en plus important dans la définition de l’expérience utilisateur.